<%--@elvariable id="APP_PATH" type=""--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/css/font-awesome.min.css">
    <link rel="stylesheet" href="${APP_PATH}/css/main.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 用户维护</a></div>
        </div>
        <%@include file="../common/top.jsp"%>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="tree">
                <%@include file="../common/menu.jsp"%>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input id="queryText" class="form-control has-success" type="text"
                                       placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button id="queryBtn" type="button" class="btn btn-warning"><i
                                class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <button onclick="deleteRoles()" type="button" class="btn btn-danger"
                            style="float:right;margin-left:10px;"><i
                            class=" glyphicon glyphicon-remove"></i> 删除
                    </button>
                    <button type="button" class="btn btn-primary" style="float:right;"
                            onclick="window.location.href='${APP_PATH}/role/add'"><i
                            class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <form id="dataForm">
                            <table class="table  table-bordered">
                                <thead>
                                <tr>
                                    <th width="30">#</th>
                                    <th width="30"><input id="allSelect" type="checkbox"></th>
                                    <th>名称</th>
                                    <th width="100">操作</th>
                                </tr>
                                </thead>
                                <tbody id="datasTable">


                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="6" align="center">
                                        <ul class="pagination" id="userPagination">

                                        </ul>
                                    </td>
                                </tr>

                                </tfoot>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${APP_PATH}/jquery/jquery-2.1.1.min.js"></script>
<script src="${APP_PATH}/bootstrap/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/script/docs.min.js"></script>
<script src="${APP_PATH}/layer/layer.js"></script>
<script type="text/javascript">
    var flagLike = false;
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        pageQuery(1);


        $("#queryBtn").click(function () {
            var queryText = $("#queryText").val();
            if (queryText == "") {
                flagLike = false;
            } else {
                flagLike = true;
            }
            pageQuery(1);
        });
        $("#allSelect").click(function () {
            var totalFlag = this.checked;
            $("#datasTable :checkbox").each(function () {
                this.checked = totalFlag;
            });
        });
    });
    $("tbody .btn-success").click(function () {
        window.location.href = "assignRole.html";
    });
    $("tbody .btn-primary").click(function () {
        window.location.href = "edit.html";
    });

    function pageQuery(pageno) {
        var loadingIndex = null;
        var jsonData = {
            pageNo: pageno,
            pageSize: "10"
        };
        if (flagLike) {
            jsonData.queryText = $("#queryText").val();
        }
        $.ajax(
            {
                type: "POST",
                url: "${APP_PATH}/role/page",
                data: jsonData,
                beforeSend: function () {
                    loadingIndex = layer.msg('处理中', {icon: 16});
                },
                success: function (result) {
                    layer.close(loadingIndex);
                    if (result.success) {
                        var page = result.datas;
                        var roleList = page.list;
                        var tableContent = "";
                        var pageContent = "";
                        $.each(roleList, function (i, role) {
                            tableContent += '<tr>';
                            tableContent += '<td>' + (i + 1) + '</td>';
                            tableContent += '<td><input name="id" value=' + role.id + ' type="checkbox"></td>';
                            tableContent += '<td>' + (role.name) + '</td>';
                            tableContent += '<td>';
                            tableContent += '<button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check" onclick="goAssignPage(' + role.id + ')"></i></button>';
                            tableContent += '<button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil" onclick="goUpdatePage(' + role.id + ')"></i></button>';
                            tableContent += '<button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove" onclick="deleteUser(' + role.id + ',\'' + role.name + '\')"></i></button>';
                            tableContent += '</td>';
                            tableContent += '</tr>';
                        });
                        if (pageno > 1) {
                            pageContent += '<li><a href="#" onclick="pageQuery(' + (pageno - 1) + ')">上一页</a></li>';
                        } else {
                            pageContent += '<li class="disabled"><a href="#" >上一页</a></li>';
                        }
                        for (var i = 1; i <= page.totalPage; i++) {
                            if (pageno == i) {
                                pageContent += '<li class="active"><a href="#" >' + i + '</a>';
                            } else {
                                pageContent += '<li><a href="#" onclick="pageQuery(' + i + ')">' + i + '</a>';
                            }

                        }
                        if (pageno < page.totalPage) {
                            pageContent += '<li><a href="#" onclick="pageQuery(' + (pageno + 1) + ')">下一页</a></li>';
                        } else {
                            pageContent += '<li class="disabled"><a href="#" >下一页</a></li>';
                        }

                        $("#datasTable").html(tableContent);
                        $("#userPagination").html(pageContent);

                    } else {
                        layer.msg("角色分页查询失败", {time: 2000, icon: 5, shift: 6}, function () {

                        });
                    }
                }
            }
        );
    }

    function goAssignPage(id) {
        window.location.href = "${APP_PATH}/role/goAssignPage?id=" + id;

    }

    function goUpdatePage(id) {
        window.location.href = "${APP_PATH}/role/edit?id=" + id;
    }

    /*
        0，判断是否选择了用户
      * 1，弹窗确认
      * 2，取到选择的那些用户的id
      * 3，ajax后端删除
      * 4，然后查询回到原来的页面
      *
        */
    function deleteRoles() {
        var checkboxs = $("#datasTable input:checked");
        if (checkboxs.length == 0) {
            layer.msg("请选择角色后再点删除", {time: 2000, icon: 5, shift: 6}, function () {

            });
        } else {
            layer.confirm("是否删除选中的角色", {icon: 3, title: '提示'}, function (cindex) {
                var loadingIndex = null;
                var data = $("#dataForm").serialize();
                $.ajax(
                    {
                        url: "${APP_PATH}/role/deletes",
                        method: "POST",
                        data: data,
                        beforeSend: function () {
                            loadingIndex = layer.msg('处理中', {icon: 16});
                        },
                        success: function (result) {
                            layer.close(loadingIndex);
                            if (result.success) {
                                pageQuery(1);
                            } else {
                                layer.msg("选中的角色删除失败", {time: 2000, icon: 5, shift: 6}, function () {

                                });
                            }
                        }
                    }
                );
            }, function (cindex) {
                layer.close(cindex);
            });
        }
    }

    function deleteUser(id, name) {
        layer.confirm("是否删除用户【" + name + "】", {icon: 3, title: '提示'}, function (cindex) {
            var loadingIndex = null;
            $.ajax(
                {
                    url: "${APP_PATH}/role/delete",
                    method: "POST",
                    data: {
                        id: id
                    },
                    beforeSend: function () {
                        loadingIndex = layer.msg('处理中', {icon: 16});
                    },
                    success: function (result) {
                        layer.close(loadingIndex);
                        if (result.success) {
                            pageQuery(1);
                        } else {
                            layer.msg("角色删除失败", {time: 2000, icon: 5, shift: 6}, function () {

                            });
                        }
                    }
                }
            );
        }, function (cindex) {
            layer.close(cindex);
        });
    }


</script>
</body>
</html>

